<template>
  <div id="app">
    <div id="loading" v-show="shopShow">正在加载出租车数据...</div>
    <div class="hot-query-view">
<!--      style="float: left; height:100%;width:25%;"-->
        <div id="step1">
          <h4>数据选择：</h4>
          <el-cascader
                  ref="getSelectData"
                  placeholder="请选择需要渲染的数据"
                  v-model="dataValue"
                  :options="options"
                  @change="handleSelectChange"
                  filterable></el-cascader>
        </div>
        <div id="step2">
          <h4>选择热力图渲染方式</h4>
          <el-button @click="addHeat1" :disabled="isDisabled" class="hot-button">热力图</el-button>
          <!--<el-button @click="addHeat2" :disabled="isDisabled" class="hot-button">热力图2</el-button>-->
          <el-button @click="addHeat3" :disabled="isDisabled" class="hot-button" >三维热力图</el-button>
<!--          <el-button @click="clean"style="width:100%; margin-left:0px;margin-top:10px">清除数据</el-button>-->
        </div>
    </div>
    <div id="map_container" :style="{height:'100%',width:'100%'}" v-if="displayMapv"></div>
    <!--<div ref="mapEcharts" id="main" :style="{height:'100%',width:'100%'}" v-if="displayEcharts"></div>-->
    <div id="containerAutonavi" :style="{height:'100%',width:'100%'}" v-if="displayAutonavi"></div>
  </div>
</template>

<script>

  import 'echarts/extension/bmap/bmap'
  import * as echarts from "echarts";
  import {baidumap} from "@/assets/js/Public/baiduditu";

  // 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: "2ea80cc47ad3077e3b0803aba12f5849",
  };

  //Autonavi数据
  let   mapAutonavi, heatmapAutonavi;
  export default {
    components: {},
    data() {
      return {
        isDisabled: true,
        shopShow: false,
        dataValue: [],
        options: this.$store.state.dataPoint[0].children,

        //Echarts数据
        mapStyle: {
          styleJson: baidumap,
        },
        mapEcharts:{},
        mapEchartsLng: 116.403,
        mapEchartsLat: 39.923,
        mapEchartsZoom: 12,

        //mapv数据
        map : Function,
        view:{},
        fullscreenLoading: false,

        // loading : {},
        displayMapv: true,
        displayEcharts: false,
        displayAutonavi: false,
        downSelectData: '',
        hotData: ''
      };
    },
    created() {
      this.$store.commit('loadMenuDataPoint')
    },
    mounted() {
      this.initMapv()
    },
    computed: {},
    methods: {
      handleSelectChange(val){
        this.shopShow = true
        this.isDisabled = true
        let downSelectData = this.$refs.getSelectData.getCheckedNodes()
        this.downSelectData = downSelectData[0].data.value
        console.log(this.downSelectData,'获取下拉节点的值');
        this.request.get("/taxiData/clickHot",
            {
              params:{
                downSelectData: this.downSelectData,
              }
            },
        ).then(res => {
          this.hotData = res.data
          console.log(this.hotData,'热力图数据')
          this.shopShow = !this.shopShow
          this.isDisabled = !this.isDisabled
        })
      },
      // Mapv初始化
      initMapv(){
        this.map = initMap({
          tilt: 60,  //地图倾斜
          heading: 0,
          center: [116.403, 39.923],
          zoom: 12,
          style: purpleStyle
        });
        // console.log(this.view);
        this.view = new mapvgl.View({
          map:this.map
        });
      },
      //Echarts初始化
      initEcharts() {
        this.mapEcharts = this.$echarts.init(this.$refs.mapEcharts)
        this.mapEcharts.setOption({
          bmap: {
            center: [this.mapEchartsLng, this.mapEchartsLat],
            zoom: this.mapEchartsZoom,
            roam: true,
          }, //bmap
        })
        this.mapEcharts.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
        console.log(this.mapEcharts);
      },


      loadingStart(){
        this.loading =this.$loading({
          lock: true, //是否锁定全屏滚动
          text: 'Loading',  //自定义文字
          spinner: 'el-icon-loading', //自定义图标，不填为默认的，填入不存在的找不到图标就不显示
          background: 'rgba(0, 0, 0, 0.7)' //自定义背景色
        })
      },

      addHeat1(){
        if(this.downSelectData !== ''){
          this.addHeatMapv()
        }else{
          this.$message({
            message: '请选择合适的数据',
            type: 'error'
          });
        }
      },
      //2d热力图功能  mapv  热力图1
      addHeatMapv(){
        this.displayMapv=true
        this.displayEcharts=false
        this.displayAutonavi = false
        console.log('displayMapv状态' + this.displayMapv);
        console.log('displayEcharts状态' + this.displayEcharts);
        //目前底图是一样的，就不需要
        //this.initMapv()

        let newData = [];
        // this.request.get("/taxiData/clickHot",
        //     {
        //       params:{
        //         downSelectData: this.downSelectData,
        //       }
        //     },
        // ).then(res => {

          setTimeout(()=>{
            //mapv数据后端精简
            let newData1 = [];
            let time =0
            setInterval(time++,1000)
            console.log(this.hotData.length,'newData.length');
            for (let i = 0; i<this.hotData.length;i++)
            {
              let itemlat = this.hotData[i].lat;
              let itemlng = this.hotData[i].lng;
              newData1.push({
                geometry:{
                  type:'Point',
                  coordinates:[itemlng,itemlat],
                },
              })
            }
            this.view.removeAllLayers()
            // this.loadingStart()
            this.view.addLayer(
                new mapvgl.HeatmapLayer({
                  height:0,
                  radius:60,
                  gradient: {
                    0.25: 'rgba(0,255,51, 1)',
                    0.55: 'rgba(0,153,51, 1)',
                    0.85: 'rgba(255,255,51)',
                    1.0: 'rgba(255,0,0)'
                  },
                  data: newData1,
                })
            )},0)

        // }
        // )
      },


      addHeat2(){
        if(this.downSelectData !== ''){
          this.addHeatEcharts()
        }else{
          this.$message({
            message: '请选择合适的数据',
            type: 'error'
          });
        }
      },
      //2d热力图功能  echarts  热力图2
      addHeatEcharts(){
        this.displayMapv = false
        this.displayEcharts= true
        this.displayAutonavi = false
        console.log('displayMapv状态'+this.displayMapv)
        console.log('displayEcharts状态'+this.displayEcharts)
        // this.loadingStart()
        // let converData1 = []
          // this.request.get("/taxiData/clickHot",
          //     {
          //       params:{
          //         downSelectData: this.downSelectData,
          //       }
          //     },
          // ).then(res => {

            // converData1 = res.data
            // console.log(converData1,'后端获取Echarts热力图数据');
            setTimeout(() => {
              this.mapEcharts = this.$echarts.init(this.$refs.mapEcharts)
              this.mapEcharts.setOption({
                bmap: {
                  center: [this.mapEchartsLng, this.mapEchartsLat],
                  zoom: this.mapEchartsZoom,
                  roam: true,
                }, //bmap
              })
              this.mapEcharts.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
              console.log(this.mapEcharts);

              //数据处理
                const resHot2 = [];
                //遍历获取的所有数据
                for (let i = 0; i < this.hotData.length; i++) {
                  //赋值经纬度
                  resHot2.push(
                      {value:[this.hotData[i].lng, this.hotData[i].lat, 20]}
                  )
                }
                console.log(resHot2,'后端获取Echarts热力图数据');

              // this.loadingStart()
              let mapData = {
                // title: '公交整体客流情况',
                title: '',
                mapColor: '#5c9ac1',   //地图填充颜色
                borderColor: '#5278a7',//地图边框颜色
                shadowColor: '#5174a4', //阴影颜色
                shadowBlur: 1, //地图阴影
                setIntervalTime: 3000,  //默认刷新时间3秒
              };

              const option = {
                title: {
                  text: mapData.title,
                  right: '20px',
                  top: 26,
                  textStyle: {
                    fontSize: 23,
                    color: '#feb64d'
                  }
                },
                itemStyle: {
                  normal: {
                    areaColor: mapData.mapColor,
                    borderColor: mapData.borderColor,
                    shadowColor: mapData.shadowColor,
                    shadowBlur: mapData.shadowBlur
                  },
                  emphasis: {
                    areaColor: mapData.mapColor,
                  }
                },
                visualMap: {
                  show: true,
                  right: "4%",
                  bottom: "5%",
                  calculable: false,
                  text: ["高", "低"],
                  min: 0,
                  max: 500,
                  seriesIndex: 0,
                  inRange: { //定义 在选中范围中 的视觉元素
                    color: ['#FFF68F', '#FFEC8B', '#EEEE00', '#CDAD00', '#cd6600'],
                    // color: ['#9287e7', '#5bc49f', '#FFFF00', 'darkorange', '#CC0000'],
                  },
                  padding: 15,
                  borderColor: '#3d97f6',
                  borderWidth: 2,
                  backgroundColor: 'rgba(21,25,28,0.8)',
                  textStyle: {
                    color: '#fff'
                  }
                },
                series: [{
                  type: 'heatmap',
                  coordinateSystem: 'bmap',
                  pointSize: 4,
                  blurSize: 6,
                  data: resHot2
                }],
              }
              console.log(option);
              this.mapEcharts.setOption(option)
              // this.loading.close()
            }, 0);
            // this.$loading().close();
          // })
        },

      addHeat3(){
        if(this.downSelectData !== ''){
          this.addHeat3D()
        }else{
          this.$message({
            message: '请选择合适的数据',
            type: 'error'
          });
        }
      },
      //3D热力图功能 mapv  三维热力图1
      addHeat3D(){
        this.displayMapv=true
        //this.displayEcharts=false
        this.displayAutonavi = false
        console.log('displayMapv状态' + this.displayMapv);
        console.log('displayEcharts状态' + this.displayEcharts);
        // this.loadingStart()
        // let newData2 = [];
        // this.request.get("/taxiData/clickHot",
        //     {
        //       params:{
        //         downSelectData: this.downSelectData,
        //       }
        //     },
        // ).then(res => {
          // newData2 = res.data

          setTimeout(()=>{
            //mapv数据后端精简
            let newData22 = [];
            let time =0
            setInterval(time++,1000)
            console.log(this.hotData.length,'newData.length');
            for (let i = 0; i<this.hotData.length;i++)
            {
              let itemlat = this.hotData[i].lat;
              let itemlng = this.hotData[i].lng;
              newData22.push({
                geometry:{
                  type:'Point',
                  coordinates:[itemlng,itemlat],
                },
              })
            }

            console.log(newData22,'newData后端精简计算后');
            console.log(time)

            //this.initMapv()
            this.view.removeAllLayers()
            this.view.addLayer(
                new mapvgl.HeatmapLayer({
                  size:10,
                  max:30,
                  height:60,
                  unit:'px',
                  gradient:{
                    0.25: 'rgba(89, 233, 179, 1)',
                    0.55: 'rgba(182, 243, 147, 1)',
                    0.85: 'rgba(254, 255, 140, 1)',
                    0.9: 'rgba(217, 29, 28, 1)',
                  },
                  data: newData22,
                })
            )
          },0)
        // })
        // this.loading.close();
      },

      //clean(){
      //  // console.log(this.view)
      //  this.view.removeAllLayers()
      //  // console.log(this.view)
      //},
    },
    beforeDestroy() {
      this.$store.commit('refresh')
    }
  };
</script>
<style scoped>
  #app{
    position: relative;
    height:100%;
    width:100%;
  }
  #loading {
    z-index: 99;
    position:absolute;
    top: 50%;
    left: 48%;
    margin-left: -130px;
    text-align: center;
    margin-top: -50px;
    width: 280px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: yellow;
    font-size: 20px;
  }
  .hot-query-view {
    position: absolute;
    top: 20px;
    left: 12px;
    width: 22%;
    height: 30%;
    z-index: 100;
    font-size: 20px;
    font-weight: 700;
    color: white;
    background-color: rgba(49, 51, 53, 0.7);
    background-image: url("../../assets/image/public_resource/border_new1.png");
    background-size: 100% 100%;
    /*opacity: 0.8;*/
    border-radius: 20px;
    overflow: auto;
  }
  #step1{
    margin-left: 30px;
  }

  #step2{
    margin-left: 30px;
  }

  .hot-button{
  }

</style>